<template>
	<view class="box">
		<view class="items">
			<view class="item1">
				<image src="../../static/uni.png" mode=""></image>
				<view class="info">
					你好
				</view>
			</view>
			<view class="item2">
				<view class="info">
					你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
				</view>
				<image src="../../static/uni.png" mode=""></image>
			</view>
		</view>
		<view class="footer">
			<view class=""
				style="background-color: #F8F8F8;width: calc(100vw - 170rpx);padding: 20rpx 30rpx;border-radius: 100px;">
				<u--input placeholder="请输入" border="none"></u--input>
			</view>
			<view class="btn">
				发送
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: "时光匆匆"
			})
		},
		methods: {

		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	.items {
		padding: 30rpx;

		.item1 {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.info {
				background-color: white;
				padding: 14rpx 22rpx;
				margin-left: 20rpx;
				border-radius: 20rpx;
			}

			image {
				width: 80rpx;
				height: 80rpx;
				min-width: 80rpx;
				border-radius: 100px;
			}
		}

		.item2 {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-bottom: 30rpx;

			.info {
				background-color: #2DBC26;
				padding: 14rpx 22rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
				color: white;
			}

			image {
				width: 80rpx;
				min-width: 80rpx;
				height: 80rpx;
				border-radius: 100px;
			}
		}
	}

	.box {
		height: 100%;

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			max-width: 100vw;
			display: flex;
			align-items: center;
			padding: 20rpx;
			background-color: white;
			justify-content: space-between;

			.btn {
				background-color: #2DBC26;
				color: white;
				padding: 16rpx 30rpx;
				border-radius: 100px;
				font-size: 26rpx;
			}
		}
	}
</style>